<template>
  <div class="container page">


<div class="display-img">
        <ul class="address">{{address.userName}}&nbsp;&nbsp;&nbsp;&nbsp;{{address.telNumber}} </ul>
        <ul class="address2">{{address.provinceName}}{{address.countyName}}{{address.detailInfo}}</ul>
    </div>

    <div class="">

        <div class="display-imgs"  :key="porduct" v-for="porduct of orderItemListDetail">
            <ul class="flex-img">
                <img :src="porduct.product_image" class="img"/>
            </ul>
            <!-- <ul class="flex-product">
                <li class="vvu">&nbsp</li>
                <li>{{porduct.product_name}}</li>
            </ul>
            <ul class="flex-product">
                <li class="display-price">
                    <p class="flex-price1">￥{{porduct.current_unit_price}}</p>
                    <p class="flex-price2">x  {{porduct.quantity}}</p>
                </li>
            </ul> -->
            <ul style="margin: 20rpx 70rpx;">
                <!-- <li class="vvu">&nbsp</li> -->
                <li>{{porduct.product_name}}</li>
                <li>&nbsp</li>
                <li>
                    <p style="color:#fff;background-color:#515151;width:50%">￥{{porduct.current_unit_price}}  x  {{porduct.quantity}}</p>

                </li>
            </ul>

        </div>


        <div class="display-note">
            <ul style="margin:10rpx">备注: {{orderdetail.remark}}</ul>
            <!-- <textarea class="flex-notes"></textarea> -->
        </div>
    </div>

    <div class="display-img" style="margin-top: 38px">
        <ul class="price1">订单信息</ul>

        <ul class="price" v-if="orderdetail.status === 50">订单状态：交易成功</ul>
        <ul class="price" v-else-if="orderdetail.status === 10">订单状态：待付款</ul>
        <ul class="price" v-else-if="orderdetail.status === 20">订单状态：待发货</ul>
        <ul class="price" v-else-if="orderdetail.status === 40">订单状态：待收货</ul>
        <ul class="price" v-else-if="orderdetail.status === 0">订单状态：已取消</ul>
        <ul class="price" v-else-if="orderdetail.status === 70">订单状态：已退款</ul>
        <ul class="price" v-else="">订单状态：交易关闭</ul>

        <!-- <ul v-if="orderdetail.status === 10" class="price">剩余支付时间：{{orderdetail.remain_time}} </ul> -->
        <ul class="price">订单号码：{{orderdetail.order_no}}</ul>
        <ul class="price" v-if="orderdetail.shipping_id">物流单号：{{orderdetail.shipping_id}}</ul>
        <ul class="price">下单时间：{{orderdetail.create_time}}</ul>
        <ul class="price">商品总价：￥{{orderdetail.payment}}</ul>
        <ul class="price" v-if="orderdetail.status === 10">未支付订单将于2天后自动关闭</ul>
        <!-- <ul class="price">运费：￥00.00</ul> -->
    </div>

    <div class="display-bottom" v-if="orderdetail.status === 10">
        <ul class="flex-bottom"></ul>
        <!-- <ul class="display-buttons"><button class="button">查看物流</button></ul> -->
        <ul class="flex-buttoms"><button class="buttons" style="border-radius:0" @click="wxpay(orderdetail.order_no)">立即支付</button></ul>
    </div>

    <div class="display-bottom" v-if="orderdetail.status === 40">
        <ul class="flex-bottom"></ul>
        <ul class="display-buttons"><button class="button" style="border-radius:0" @click="shipping(orderdetail.shipping_id)">查看物流</button></ul>
        <span>&nbsp</span>
        <ul class="flex-buttoms"><button class="buttons" style="border-radius:0" @click="confirmGoods(orderdetail.order_no)">确认收货</button></ul>
    </div>

    <div class="display-bottom" v-if="orderdetail.status === 50">
        <ul class="flex-bottom"></ul>
        <ul class="display-buttons"><button class="button" style="border-radius:0" @click="shipping(orderdetail.shipping_id)">查看物流</button></ul>
    </div>

  <!-- <div class="orderlist">
    <div class="order">
        <div style="text-align: right;">订单号: {{orderdetail.order_no}}</div>
        <div v-if="orderdetail.status === 50">交易成功</div>
        <div v-else-if="orderdetail.status === 10">待付款</div>
        <div v-else-if="orderdetail.status === 20">待发货</div>
        <div v-else-if="orderdetail.status === 40">待收货</div>
        <div v-else-if="orderdetail.status === 0">已取消</div>
        <div v-else=""> 交易关闭</div>
   </div>


  <div class="porduct" :key="porduct" v-for="porduct of orderItemListDetail">
    <div>{{porduct.product_name}}</div>

      <img :src="porduct.product_image">
    <div>数量{{porduct.quantity}}</div>
  </div>

  </div>

  <div class="orderlist">
    <div class="order">
        <div style="">备注: {{orderdetail.remark}}</div>
        <div style="">总价: {{orderdetail.payment}}</div>
   </div>
  </div>

  <div style="">收获地址: {{orderdetail.shipping_wx}}</div> -->


  </div>
</template>
<script>
import {showSuccess, showModal} from '@/util'
import {get, post, getAuth, postAuth} from '@/util'
// import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
  components: {
  },
  data () {
    return {
      address: {},
      orderItemListDetail: [],
      orderdetail: {},
      orderno:'',
      tabA: 0,
      productList: [],
      focus: true,
      inputValue: ''
    }
  },
  mounted () {
    this.userinfo = wx.getStorageSync('userinfo')
  },
  onShareAppMessage() {
    return {
      title: `华人耀酱香型白酒，传承古法工艺，与国酒茅台同宗同源同品。`,
      // imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share.png',
      path: `/pages/hcdindex/main?shareuser=${wx.getStorageSync('user').id}`
    }
  },
  methods: {
      shipping(shippingId) {
        wx.navigateTo({
          url: `/pages/shippinginfo/main?shippingid=${shippingId}`
        })
      },
      confirmGoods(orderNo){
        postAuth(`geweb/order/confirm_receipt?userid=${wx.getStorageSync('user').id}&orderno=${orderNo}`, {}, {})
        .then(result => {

          if(result.code === 200) {

              wx.navigateTo({
                url: '/pages/alert/main?info=已确认收货'
              })
              // wx.showToast({
              //   title: '确认收获成功',
              //   icon: 'none'
              // })

              // wx.showLoading();
              // this.tabA = 0
              // this.get_orderlist("")
              // wx.hideLoading();

          }

        })

      },
      time(time){
        console.log(time.split("T")[0])

        return time
      },
      wxpay(orderNo) {
        // console.log(orderNo)
        // console.log(JSON.parse(wx.getStorageSync('session_key')).openid)
        // console.log(wx.getStorageSync('user').id)
        postAuth(`geweb/wxpay/create?openid=${JSON.parse(wx.getStorageSync('session_key')).openid}&userid=${wx.getStorageSync('user').id}&order_no=${orderNo}`, {}, {})
        .then(result => {

          if(result.code === 200) {

            // console.log(result)

            wx.requestPayment(
            {
            // 'appId': 'wxa13b77d438fbf138',
            'timeStamp': result.res.timeStamp,
            'nonceStr': result.res.nonceStr,
            'package': result.res.package,
            'signType': 'MD5',
            'paySign': result.res.paySign,
            'success':function(res){
              console.log('支付成功')
              postAuth(`geweb/order/order_pay?openid=${JSON.parse(wx.getStorageSync('session_key')).openid}&userid=${wx.getStorageSync('user').id}&orderno=${orderNo}`, {}, {})
              .then(result => {

                if(result.code === 200) {

                  wx.navigateTo({
                    url: '/pages/alert/main?info=订单已支付成功'
                  })

                }


              })

                  // wx.navigateTo({
                  //   url: '/pages/alert/main?info=订单已支付成功'
                  // })
                  // wx.showToast({
                  //   title: '订单支付成功',
                  //   icon: 'none'
                  // })

                  // wx.switchTab({
                  //   url: `/pages/usercenter/main`
                  // })

            },
            'fail':function(res){
              console.log('支付失败')
              wx.showToast({
                title: '支付失败',
                icon: 'none'
              })

            },
            'complete':function(res){
              console.log('支付完成')

            }
            })

          }
          else {
            wx.showToast({
              title: '支付失败',
              icon: 'none'
            })
          }

        })
    },
    chooseTab(x) {
      this.tabA = x;
      if(x === 0) {
        this.get_product("");
      } else {
        this.get_product(x);
      }
    },
    async get_product(categoryId) {
      return await get(`geweb/product/get_productlist?categoryId=${categoryId}`, {}).then(result => {
        console.log(result.res)
        this.productList = result.res;
      })
    },
    async get_orderdetail() {
      return await getAuth(`geweb/order/get_orderdetail?userid=${JSON.parse(wx.getStorageSync('user').id)}&orderno=${this.orderno}`, {}, {}).then(result => {

        if(result.code === 301) {
          // console.log("去登陆")
          wx.switchTab({
            url: `/pages/usercenter/main`
          })
          wx.showToast({
            title: '请登录',
            icon: 'none'
          })
        }

        if(result.code === 200) {
            // console.log(result.res)
            this.orderdetail = result.res;
            // console.log("create_time", this.orderdetail.create_time)
            // let remain =  new Date(this.orderdetail.create_time);
            // console.log("Date", new Date(remain))
            // console.log("remain", remain)

            // this.orderdetail.remain_time =  this.calculateDiffTime(remain.getTime())
            // console.log("remain_time",this.orderdetail.remain_time)

            this.orderdetail.create_time = this.orderdetail.create_time.split("T")[0] + " " +this.orderdetail.create_time.split("T")[1].split(".")[0];
            this.address = JSON.parse(this.orderdetail.shipping_wx)
            console.log(this.address)
        }
      })
    },
    async get_orderItemListDetail() {
      return await getAuth(`geweb/order/get_orderitemlistdetail?userid=${JSON.parse(wx.getStorageSync('user').id)}&orderno=${this.orderno}`, {}, {}).then(result => {

        if(result.code === 301) {
          // console.log("去登陆")
          wx.switchTab({
            url: `/pages/usercenter/main`
          })
          wx.showToast({
            title: '请登录',
            icon: 'none'
          })
        }

        if(result.code === 200) {
            // console.log(result.res)
            this.orderItemListDetail = result.res;
        }
      })
    },
    productChoose (id) {
      // console.log(name, img, userId, accountId)
      wx.navigateTo({
        url: `/pages/product-detail/main?id=${id}`
      })
    },
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
    async demo() {
    // return await get2('demo', {})
    },
    async joke() {
      return await get2('api/jokes', {})
    },
    predict () {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    },
        checkTime(i)
      {
          if(i<10)
          {
              i="0"+i;
          }
          return i;
      },
    calculateDiffTime(end_time) {
        // var date = parseInt(start_time - end_time)/1000;
        var now = new Date();
        var date = parseInt(now.getTime() - end_time)/1000;

     　 var day = parseInt(date/60/60/24);
        var hour = parseInt(date/60/60%24);
        var minute = parseInt(date/60%60);
        var second = parseInt(date%60);
        hour = this.checkTime(hour);
        minute = this.checkTime(minute);
        second = this.checkTime(second);
        return day+"天"+hour+"时"+minute+"分"+second+"秒";
    }

  },
  onShow () {
    this.orderno = this.$root.$mp.query.orderno
    // console.log(this.orderno)
    // this.orderdetail = {}
    // this.orderItemListDetail = []
    this.get_orderdetail()

    this.get_orderItemListDetail()

    // setTimeout(() => {

    // }, 500)
    // console.log(this.orderdetail)
    console.log(this.orderItemListDetail)

    // var t = "2019-08-08T19:25:44.000+0000";
    // var T = new Date(t);
    // console.log(T.getTime())
    // console.log(this.calculateDiffTime(1565292344000));



  }
}
</script>

<style scoped lang='scss'>
.container{
  font-size: 30rpx;
}
page {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.section {
  text-align: center;
  margin-top: 200rpx;
  padding: 0 100rpx;
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
}
.recomond {
  margin: 0 25rpx;
  margin-top: 25rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  display: flex;
  p {
    flex: 1;
  }
}
.choose {
  color: #44CFDC;
}

.porduct {
  padding: 50rpx;
  text-align: left;
}

.orderlist {
    margin: 0 25rpx;
    padding: 25rpx;
    margin-top: 50rpx;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.order{
  text-align: right;
  display: flex;
     div {
       flex: 1;
     }
}
.porduct {
      img{
        width: 80rpx;
        height:80rpx;
        margin: 10rpx;
        // border-radius: 50%;
    }
}

.foot {
  color: rgb(45, 161, 187);
  text-align: center;
  margin-top: 200rpx;
}

.display-bottom{
        display:flex;
        // background: #C8D3D1;
        height: 80rpx;
        line-height: 80rpx;
        margin-top: 10rpx;
    }
    .flex-bottom{
        flex: 3;
    }
    .address{
        margin-left: 40px;
        margin-top: 20px;
        margin-bottom: 5px;
        font-size: 13px;
    }
    .flex-buttoms{
        flex: 1;
    }
    .address2{
        margin-left: 40px;
        margin-bottom: 20px;
        font-size: 13px;
    }
    .price1{
        margin-left: 15px;
        margin-bottom: 8px;
        font-size: 13px;
        margin-top: 10px;
    }
    .price{
        margin-left: 15px;
        margin-bottom: 8px;
        font-size: 13px;
    }
    .display-note{
        display: flex;
        // border: 1px solid #cfcfcf;
        height: 68px;
        margin-left: 18px;
        margin-right: 18px;
        margin-bottom: 18px;
        // line-height: 68px;
        // background: #C8D3D1;
    }
    .flex-note{
        flex: 1;
        font-size: 13px;
    }
    .flex-notes{
        flex: 9;
        height: 64px;
    }
	.flex{
        flex: 1;
        border: 1.5px solid #cfcfcf;
        height: 25px;
        line-height: 25px;
        font-size: 10px;
        font-weight:bold;
    }
    .display-img{
        border: 1px solid #cfcfcf;
        margin: 20rpx;
    }
    .display-imgs{
        margin-bottom: 20px;
        margin-top: 18px;
        display:flex;
    }
    .flex-img{
        flex: 1;
    }
    .flex-product{
        flex: 1.5;
        margin-left: 10px;
    }
    .img{
        width: 100px;
        height: 100px;
        margin-left: 22px;
    }
    .display-price{
        display:flex;
        background: #C8D3D1;
        margin-top: 71px;
        height: 23px;
        line-height: 23px;
    }
    .flex-price1{
        flex: 1;
        font-size: 13px;
        text-align: right;
        margin-right: 18px;
    }
    .flex-price2{
        flex: 1;
        text-align: left;
        font-size: 13px;
    }
    .vvu{
        font-size: 22px;
    }
    .buttons{
        font-weight:bold;
        width:85px;
        height:21px;
        background: #636363;
        color: white;

    }


     .display{
		display:flex;
        text-align: center;
	}
    .display-button{
        flex: 2;
    }
    .display-buttons{
        flex: 1;

    }
    .button{
        font-size: 25rpx;
        // font-weight:bold;
        width:85px;
        height:60rpx;
        line-height:60rpx;
        // background: #cfe7e7;
        border: 1px solid #707070;
        color: #000;
        margin-bottom: 10px;
        // margin-top: 30px
    }
    .buttons{
         // font-weight:bold;
        font-size: 25rpx;
        width:85px;
        height:60rpx;
        line-height:60rpx;
        // background: #636363;
        background-color: #000;
        color: white;
        // margin-top: 30px
    }
</style>
